<template lang="pug">
.ignore-pacs-terminology
  .ignore-pacs-terminology-search
    .ignore-pacs-terminology-search-radio
      el-radio-group(v-model="radio")
        el-radio(v-for="(item) in radioGroup",:value="item.value") {{ item.label }}
    .ignore-pacs-terminology-search-input
      mt-input(v-model="input",placeholder="输入关键字过滤词条",:clearable="true")
  .ignore-pacs-terminology-body
    .ignore-pacs-terminology-body-tree
      SectionTitle 词条
      ElTree(class="filter-tree"
        :data="treeData"
        v-loading="loadingMap['treeData']"
        ref="tree"
        node-key="id"
        :accordion="false"
        :highlight-current="true"
        :expand-on-click-node="false"
        :props="{ label: 'name' }"
        :default-expanded-keys="defaultExpandedKeys"
        )
        template(#default="{ node, data }")
          ElPopconfirm(
          confirm-button-text="替换"
          cancel-button-text="追加"
          title="您可以选择追加或者替换词条?"
          @confirm="update(data)"
          @cancel="append(data)"
          :width="240"
          v-if="isNotDelete.indexOf(data.level) == -1"
          )
            template(#reference)
              .custom-tree-node(@click="previewInit(data)")
                span {{ node.label }}
          .custom-tree-node(v-if="isNotDelete.indexOf(data.level) > -1") 
            span {{ node.label }}
    .ignore-pacs-terminology-body-preview
      SectionTitle 词条预览
      .ignore-pacs-terminology-body-preview-body(v-if="isnitPreview") 
        span.preview-title 影像所见：
        span.preview-content {{ valueChange.imageFindings }}
        span.preview-title 诊断意见：
        span.preview-content {{ valueChange.diagnosticOpinion }}
</template>
<script setup lang="ts">
import { ElTree, SectionTitle, ElPopconfirm } from "@scmt/common-components";
// import {
//   CircleCheckFilled,
//   CircleCloseFilled,
// } from "@element-plus/icons-vue";

import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
//@ts-ignore
import type {
  EntryTypeEntity,
  EntryTypeQueryParams,
} from "@scmt/api-pacs-entry-type";

//添加 Props属性
const props = defineProps({
  selectItemTag: Object,
});

const isNotDelete = ref([0, 1, 2]);
const input = ref("");
const preview = ref("");
//radio选择
const radio = ref("1");
const radioGroup = reactive([
  { label: "集团模板/词条", value: "1" },
  { label: "机构模板/词条", value: "2" },
  { label: "个人词条", value: "3" },
]);
//定义事件
const emit = defineEmits(["valueAdd", "valueChange"]);
const $api = useApi();
const tree = ref<null | InstanceType<typeof ElTree>>(null);
//树状数据
const treeData = ref<any[]>([]);
const model = ref<EntryTypeEntity>($api.pacs.entryType.$$createEntity({}));

const queryPramas = reactive<EntryTypeQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});
const defaultExpandedKeys = ref<any[]>([]);
const currentNodeKey = ref("");
const { request, data, loadingMap } = useRequest({
  treeData: () => {
    model.value = $api.pacs.entryType.$$createEntity({});
    let pramas = Object.assign({ isGetAll: 1 }, queryPramas, {
      name: input.value,
    });
    return $api.pacs.entryType.queryTree(pramas).then((res) => {
      const appData = data.treeData ?? res;
      let resData: any[] = [];
      if (appData && appData.length > 0) {
        resData = appData;
        if (resData && resData.length > 0) {
          defaultExpandedKeys.value.push(resData[0].id);
          if (resData[0].children) {
            model.value = resData[0].children[0];
            model.value.parentId = model.value?.id;
            defaultExpandedKeys.value.push(model.value?.id);
            nextTick(() => {
              currentNodeKey.value = resData[0].children[0].id;
              tree.value?.setCurrentKey(currentNodeKey.value);
            });
          }
        }
      }
      treeData.value = resData;
    });
  },
  //根据类型查询术语
  entry: (typeId: string) => {
    return $api.pacs.entry.getEntryByTypeId(typeId);
  },
});
const valueChange = ref({ imageFindings: "", diagnosticOpinion: "" });
const isnitPreview = ref(false);
/**
 * 追加事件
 */
const update = (data: any) => {
  if (data) {
    //结论追加事件
    emit("valueChange", {
      imageFindings: valueChange.value.imageFindings,
      diagnosticOpinion: valueChange.value.diagnosticOpinion,
    });
  }
};
/**
 * 替换事件
 */
const append = (data: any) => {
  if (data) {
    //结论改变事件
    emit("valueAdd", {
      imageFindings: valueChange.value.imageFindings,
      diagnosticOpinion: valueChange.value.diagnosticOpinion,
    });
  }
};
//预览初始化
const previewInit = (data: any) => {
  if (data) {
    request("entry", data.id).then((res) => {
      if (res) {
        if (res && res.id && res.id.trim().length > 0) {
          preview.value =
            "影像所见：" +
            "<br/>" +
            res.imageFindings +
            "<br/>" +
            "诊断意见：" +
            "<br/>" +
            res.diagnosticOpinion;
          valueChange.value.imageFindings = res.imageFindings;
          valueChange.value.diagnosticOpinion = res.diagnosticOpinion;
          isnitPreview.value = true;
        }
      }
    });
  }
};
//监听登记单选择改变
watch(
  () => props.selectItemTag,
  (item) => {
    isnitPreview.value = false;
    if (item) {
      request("treeData");
    }
  },
  {
    immediate: true,
  }
);
//监听登记单选择改变
watch(
  () => input.value,
  () => {
    isnitPreview.value = false;
    request("treeData");
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.ignore-pacs-terminology {
  padding-top: var(--mt-padding);
  height: 100%;
  display: flex;
  flex-direction: column;

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: var(--mt-padding);

    span:first-child {
      white-space: normal;
      line-height: 14px;
      font-size: 14px;
      font-weight: 700;
      color: #000;
    }

    &-icon {
      display: flex;

      .mt-icon {
        color: #1c7bef;
        padding: 0px var(--mt-padding-small);
      }
    }
  }

  &-search {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  &-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--mt-padding);
    height: calc(100% - 80px);

    &-tree {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: calc(100% - 204px);
      overflow-y: auto;

      .section-title {
        flex-shrink: 0;
      }

      .el-tree {
        flex: 1;
      }
    }

    &-preview {
      flex-shrink: 0;
      height: 200px;

      display: flex;
      flex-direction: column;
      border-radius: 0.208333vw;
      border: 1px solid var(--mt-card-border-color);
      margin-bottom: var(--mt-margin);

      .section-title {
        flex-shrink: 0;
      }

      &-body {
        color: #000;
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;

        .preview-title {
          font-weight: 600;
          text-indent: 1em;
          margin-bottom: var(--mt-margin-small);
        }

        .preview-content {
          text-indent: 3em;
        }
      }
    }
  }

  .section-title {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-size: 16px;
  }
}
</style>
